<template>
  <div>
    <el-steps :active="2" >
      <el-step title="服务商注册信息"/>
      <el-step title="服务商信息填写"/>
      <el-step title="服务商资质认证"/>
      <el-step title="提交平台审核"/>
    </el-steps>
    <el-form ref="proveData" :model="proveData" style="padding: 0 140px;" label-width="150px" class="">
      <div class="title">
        <h4>上传资质认证</h4>
        <el-switch
          v-model="proveData.is_three_card"
          inactive-text="三证合一"/>
      </div>
      <div class="upload">
        <div v-show="!proveData.is_three_card" class="picture-wrap">
          <div><span style="color: red">*</span> 营业执照</div>
          <el-upload
            :show-file-list="false"
            :on-success="handleLicenseSuccess"
            :before-upload="beforeAvatarUpload"
            :action="uploadUrl"
            :headers="{ token: token}"
            name="upfile"
            class="avatar-uploader">
            <img v-if="proveData.business_license_electronic" :src="proveData.business_license_electronic" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
            <div slot="tip" class="el-upload__tip">
              <span class="demonstration">证书有效期 </span>
              <el-date-picker
                v-if="!proveData.license_electronic_islong"
                v-model="valueDate1"
                :clearable="false"
                type="daterange"
                size="mini"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate1"/>
              <el-date-picker
                v-if="proveData.license_electronic_islong"
                v-model="proveData.license_electronic_starttime"
                :clearable="false"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
              />
              <!--<el-date-picker-->
              <!--v-if="!proveData.license_electronic_islong"-->
              <!--v-model="proveData.license_electronic_starttime"-->
              <!--:clearable="false"-->
              <!--:picker-options="ElectronicPickerDateBefore"-->
              <!--type="date"-->
              <!--size="mini"-->
              <!--value-format="yyyy-MM-dd"-->
              <!--placeholder="开始日期"-->
              <!--@change="changeTime"/>-->
              <!-- - -->
              <!--<el-date-picker-->
              <!--v-if="proveData.license_electronic_islong"-->
              <!--v-model="proveData.license_electronic_endtime"-->
              <!--:clearable="false"-->
              <!--:picker-options="ElectronicPickerDateAfter"-->
              <!--type="date"-->
              <!--size="mini"-->
              <!--value-format="yyyy-MM-dd"-->
              <!--placeholder="结束日期"/>-->
              <el-checkbox v-model="proveData.license_electronic_islong" @change="clearDate1">长期</el-checkbox>
            </div>
          </el-upload>
        </div>
        <div v-show="!proveData.is_three_card" class="picture-wrap">
          <div><span style="color: red">*</span> 组织机构代码证</div>
          <el-upload
            :show-file-list="false"
            :on-success="handleOrganizationSuccess"
            :before-upload="beforeAvatarUpload"
            :action="uploadUrl"
            :headers="{ token: token}"
            name="upfile"
            class="avatar-uploader">
            <img v-if="proveData.business_organization_electronic" :src="proveData.business_organization_electronic" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
            <div slot="tip" class="el-upload__tip">
              <span class="demonstration">证书有效期 </span>
              <el-date-picker
                v-if="!proveData.organization_electronic_islong"
                v-model="valueDate2"
                :clearable="false"
                type="daterange"
                size="mini"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate2"/>
              <el-date-picker
                v-if="proveData.organization_electronic_islong"
                v-model="proveData.organization_electronic_starttime"
                :clearable="false"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
              />
              <el-checkbox v-model="proveData.organization_electronic_islong" @change="clearDate2">长期</el-checkbox>
            </div>
          </el-upload>
        </div>
        <div v-show="!proveData.is_three_card" class="picture-wrap">
          <div><span style="color:red">*</span> 税务登记证</div>
          <el-upload
            :show-file-list="false"
            :on-success="handleTaxSuccess"
            :before-upload="beforeAvatarUpload"
            :action="uploadUrl"
            :headers="{ token: token}"
            name="upfile"
            class="avatar-uploader">
            <img v-if="proveData.tax_registration" :src="proveData.tax_registration" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
            <div slot="tip" class="el-upload__tip">
              <span class="demonstration">证书有效期 </span>
              <el-date-picker
                v-if="!proveData.tax_registration_islong"
                v-model="valueDate3"
                :clearable="false"
                type="daterange"
                size="mini"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate3"/>
              <el-date-picker
                v-if="proveData.tax_registration_islong"
                v-model="proveData.tax_registration_starttime"
                :clearable="false"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"/>
              <el-checkbox v-model="proveData.tax_registration_islong" @change="clearDate3">长期</el-checkbox>
            </div>
          </el-upload>
        </div>
        <div v-if="proveData.is_three_card" class="picture-wrap">
          <div><span style="color:red">*</span> 三证合一</div>
          <el-upload
            :show-file-list="false"
            :on-success="handleThreeSuccess"
            :before-upload="beforeAvatarUpload"
            :action="uploadUrl"
            :headers="{ token: token}"
            name="upfile"
            class="avatar-uploader">
            <img v-if="proveData.three_card_image" :src="proveData.three_card_image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
            <div slot="tip" class="el-upload__tip">
              <span class="demonstration">证书有效期 </span>
              <el-date-picker
                v-if="!proveData.three_card_islong"
                v-model="valueDate4"
                :clearable="false"
                type="daterange"
                size="mini"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate4"/>
              <el-date-picker
                v-if="proveData.three_card_islong"
                v-model="proveData.three_card_starttime"
                :clearable="false"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"/>
              <el-checkbox v-model="proveData.three_card_islong" @change="clearDate4">长期</el-checkbox>
            </div>
          </el-upload>
        </div>
        <div class="pickture-wrap">
          <div>其他证明材料</div>
          <el-upload
            :show-file-list="false"
            :on-success="handleOtherSuccess"
            :before-upload="beforeAvatarUpload"
            :action="uploadUrl"
            :headers="{ token: token}"
            name="upfile"
            class="avatar-uploader">
            <img v-if="proveData.other_prove" :src="proveData.other_prove" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
            <div slot="tip" class="el-upload__tip">
              <span class="demonstration">证书有效期 </span>
              <el-date-picker
                v-if="!proveData.other_prove_islong"
                v-model="valueDate5"
                :clearable="false"
                type="daterange"
                size="mini"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate5"/>
              <el-date-picker
                v-if="proveData.other_prove_islong"
                v-model="proveData.other_prove_starttime"
                :clearable="false"
                type="date"
                size="mini"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"/>
              <el-checkbox v-model="proveData.other_prove_islong" @change="clearDate5">长期</el-checkbox>
            </div>
          </el-upload>
        </div>
      </div>
      <div class="title">
        <h4 >对公账户信息</h4>
      </div>
      <el-form-item label="开户名称">
        <el-input v-model="proveData.bank_account_name" placeholder="请输入开户名称"/>
      </el-form-item>
      <el-form-item label="开户银行">
        <el-input v-model="proveData.bank_name" placeholder="请输入开户银行"/>
      </el-form-item>
      <el-form-item label="银行账号">
        <el-input v-model="proveData.bank_account_number" placeholder="请输入银行账号"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="handlePre()">上一步</el-button>
        <el-button @click="storageInfo">暂存信息</el-button>
        <el-button type="primary" @click="submitForm('proveData')">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getServiceProveData, saveCompanyProveData } from '@/api/serviceinfo'
export default {
  data() {
    return {
      token: this.$store.getters.token,
      valueDate1: [],
      valueDate2: [],
      valueDate3: [],
      valueDate4: [],
      valueDate5: [],
      // pickerBeginDateBefore: {
      //   disabledDate: (time) => {
      //     const beginDateVal = this.proveData.license_electronic_starttime
      //     if (beginDateVal) {
      //       return time.getTime() > beginDateVal
      //     }
      //   }
      // },
      // pickerBeginDateAfter: {
      //   disabledDate: (time) => {
      //     const beginDateVal = this.proveData.license_electronic_endtime
      //     if (beginDateVal) {
      //       return time.getTime() < beginDateVal
      //     }
      //   }
      // },
      proveData: {},
      // proveData: {
      //   'business_license_electronic': '',
      //   'license_electronic_starttime': '',
      //   'license_electronic_endtime': '',
      //   'license_electronic_islong': null,
      //   'business_organization_electronic': '',
      //   'organization_electronic_starttime': '',
      //   'organization_electronic_endtime': '',
      //   'organization_electronic_islong': null,
      //   'tax_registration': '',
      //   'tax_registration_starttime': '',
      //   'tax_registration_endtime': '',
      //   'tax_registration_islong': null,
      //   'other_prove': '',
      //   'other_prove_starttime': '',
      //   'other_prove_endtime': '',
      //   'other_prove_islong': null,
      //   'bank_account_name': '',
      //   'bank_account_number': '',
      //   'bank_name': '',
      //   'three_card_image': '',
      //   'three_card_starttime': '',
      //   'three_card_endtime': '',
      //   'three_card_islong': null,
      //   'is_three_card': null
      // },
      uploadUrl: process.env.BASE_API + '/service/files/uploadOneFile' // 图片上传网址
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    changeTime(date) {
      this.proveData.license_electronic_endtime = ''
      this.pickerBeginDateAfter = {
        disabledDate(time) { // 开始时间-结束时间
          return (time.getTime() < new Date(date).getTime())
        }
      }
    },
    handlePre() {
      this.$router.replace('second')
    },
    fetchData() {
      getServiceProveData().then(response => {
        if (response.status === 200) {
          this.proveData = response.data
          this.valueDate1.push(
            this.proveData.license_electronic_starttime,
            this.proveData.license_electronic_endtime
          )
          this.valueDate2.push(
            this.proveData.organization_electronic_starttime,
            this.proveData.organization_electronic_endtime
          )
          this.valueDate3.push(
            this.proveData.tax_registration_starttime,
            this.proveData.tax_registration_endtime
          )
          this.valueDate4.push(
            this.proveData.three_card_starttime,
            this.proveData.three_card_endtime
          )
          this.valueDate5.push(
            this.proveData.other_prove_starttime,
            this.proveData.other_prove_endtime
          )
        }
      })
    },
    storageInfo() {
      this.proveData.service_info_status = 4
      saveCompanyProveData(this.proveData).then(response => {
        if (response.status === 200) {
          this.$message({
            message: '信息已保存',
            type: 'success'
          })
        } else {
          this.$message({
            message: '信息暂存失败',
            type: 'error'
          })
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.proveData.service_info_status = 0
          saveCompanyProveData(this.proveData).then(response => {
            if (response.status === 200) {
              this.$message({
                message: '信息已保存',
                type: 'success'
              })
              this.$router.replace('fourth/review')
            } else {
              this.$message({
                message: '信息保存失败',
                type: 'error'
              })
            }
          })
        } else {
          this.$message({
            message: '请填写必要信息',
            type: 'warning'
          })
          return false
        }
      })
      // this.$router.push('fourth/review')
    },
    handleLicenseSuccess(res, file) {
      if (res.data.status === 200) {
        this.proveData.business_license_electronic = res.data.url
      }
    },
    changeDate1() {
      this.proveData.license_electronic_starttime = this.valueDate1[0]
      this.proveData.license_electronic_endtime = this.valueDate1[1]
    },
    clearDate1() {
      this.proveData.license_electronic_starttime = ''
      this.proveData.license_electronic_endtime = ''
      this.valueDate1 = []
    },
    handleOrganizationSuccess(res, file) {
      if (res.data.status === 200) {
        this.proveData.business_organization_electronic = res.data.url
      }
    },
    changeDate2() {
      this.proveData.organization_electronic_starttime = this.valueDate2[0]
      this.proveData.organization_electronic_endtime = this.valueDate2[1]
    },
    clearDate2() {
      this.proveData.organization_electronic_starttime = ''
      this.proveData.organization_electronic_endtime = ''
      this.valueDate2 = []
    },

    handleTaxSuccess(res, file) {
      if (res.data.status === 200) {
        this.proveData.tax_registration = res.data.url
      }
    },
    changeDate3() {
      this.proveData.tax_registration_starttime = this.valueDate3[0]
      this.proveData.tax_registration_endtime = this.valueDate3[1]
    },
    clearDate3() {
      this.proveData.tax_registration_starttime = ''
      this.proveData.tax_registration_endtime = ''
      this.valueDate3 = []
    },
    handleThreeSuccess(res, file) {
      if (res.data.status === 200) {
        this.proveData.three_card_image = res.data.url
      }
    },
    changeDate4() {
      this.proveData.three_card_starttime = this.valueDate4[0]
      this.proveData.three_card_endtime = this.valueDate4[1]
    },
    clearDate4() {
      this.proveData.three_card_starttime = ''
      this.proveData.three_card_endtime = ''
      this.valueDate4 = []
    },
    handleOtherSuccess(res, file) {
      if (res.data.status === 200) {
        this.proveData.other_prove = res.data.url
      }
    },
    changeDate5() {
      this.proveData.other_prove_starttime = this.valueDate5[0]
      this.proveData.other_prove_endtime = this.valueDate5[1]
    },
    clearDate5() {
      this.proveData.other_prove_starttime = ''
      this.proveData.other_prove_endtime = ''
      this.valueDate5 = []
    },
    beforeAvatarUpload(file) {
      console.log('file', file)
      const isJPG = file.type === 'image/jpeg'
      const isLt6M = file.size / 1024 / 1024 < 6

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt6M) {
        this.$message.error('上传图片大小不能超过 6MB!')
      }
      return isJPG && isLt6M
    }
  }
}
</script>
<style rel="stylesheet" lang="scss">
  .disabled .el-upload--picture-card {
    display: none;
}
  .upload {
    .el-input--suffix .el-input__inner {
      padding-right: 6px;
      padding-left: 26px;
    }
    .el-input__prefix {
      left: 2px;
    }
  }

  .el-date-editor.el-input {
    width: 108px;
    margin-right: 102px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-right: 30px;
    margin-top: 16px;
    background-color: #f4f4f4;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 340px;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .avatar {
    width: 340px;
    height: 200px;
    display: block;
  }
  .el-date-editor--daterange.el-input__inner {
    width: 210px;
  }
  .content .el-checkbox {
    vertical-align: middle;
  }
</style>
<style rel="stylesheet" lang="scss" scoped>
  .upload {
    display: flex;
    flex-wrap: wrap;
  }
  .title {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E8E8E8;
    margin-bottom: 34px;
    margin-top: 40px;
    h4 {
      margin-top: 0;
      width:128px;
      font-size:16px;
      color:rgba(51,51,51,1);
      line-height:21px;
    }
  }
  .picture-wrap {
    margin-bottom: 30px;
  }
  .demonstration {
    vertical-align: middle;
  }
</style>
